import React, { useState } from 'react'
import "./App.css"

import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App() {
  //状态提升,把数据放在App中
  //初始化todoList数据
  const [todoList, setTodoList] = useState([
    { id: nanoid(), todo: "唱", done: false },
    { id: nanoid(), todo: "跳", done: false },
    { id: nanoid(), todo: "rap", done: false },
  ])

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header setTodoList={setTodoList} todoList={todoList}/>
        <List todoList={todoList} setTodoList={setTodoList}/>
        <Footer />
      </div>
    </div>
  )
}

